<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />
    <title>我的简历</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background: #eee;
        margin: 20px 0;
      }
      article {
        width: 21cm;
        min-height: 29.7cm;
        background: white;
        margin: 0 auto;
        overflow: auto;
        padding: 1em;
      }
    </style>
    <style media="print">
      body {
        margin: 0;
      }
    </style>
    <style>
      p {
        margin: 0.3em 0;
      }
      h1 {
        font-size: 25px;
        margin-top: 0;
      }
      ol,
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      strong {
        font-weight: normal;
        color: #f60;
      }
      p,
      li {
        color: #666;
      }
      a {
        color: inherit;
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid;
      }
      h3,
      h4,
      h5,
      h6 {
        margin: 0;
      }
      h4,
      h5,
      h6 {
        font-weight: normal;
      }
      .bio {
        position: relative;
      }
      .bio img {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>

    <style>
      .projects p {
        color: #666;
      }
      .projects strong {
        color: #f60;
      }
      .projects > ol {
        list-style-position: inside;
        padding: 0;
        margin-top: 0;
      }
      .projects > ol > li {
        margin-bottom: 24px;
      }
      .projects > ol > li > header {
        display: flex;
        justify-content: space-between;
      }
      .projects > ol > li h3 {
        display: inline-block;
      }
    </style>
    <style>
      #skills {
        width: 500px;
        height: 270px;
      }
      .skills > .wrapper {
        display: flex;
        justify-content: space-between;
      }
      .skills > .wrapper > :first-child {
        margin-right: 24px;
      }
      .skills > .wrapper > ul {
        color: #666;
      }
      .skills > .wrapper > ul > li {
        line-height: 1.2;
        margin-bottom: 12px;
      }
      .skills strong {
        color: #f60;
      }
    </style>
    <style>
      .openSource > header img {
        position: absolute;
        right: 0;
        top: 0;
      }
      .openSource > ul > li {
        margin-bottom: 24px;
      }
      .openSource header {
        position: relative;
        display: flex;
        justify-content: space-between;
      }
    </style>
    <style>
      .jobs header {
        display: flex;
        color: #666;
        margin-bottom: 12px;
      }
      .jobs header > h3 {
        font-size: 18px;
        color: #333;
      }
      .jobs header > h4 {
        margin-left: 1em;
        font-size: 18px;
      }
      .jobs header > span {
        font-size: 18px;
        margin-left: auto;
      }
      .jobs > ol > li {
        margin: 12px 0;
      }
    </style>
    <style>
      @media (max-width: 500px) {
        body {
          margin: 0;
        }
        article {
          width: auto;
          height: auto;
        }
        .bio img {
          display: none;
        }
        .skills .wrapper {
          flex-direction: column;
        }
        #skills {
          width: auto;
        }
        .jobs header {
          flex-direction: column;
        }
        .jobs header > h3,
        .jobs header > h4,
        .jobs header > span {
          margin: 0;
        }
      }
    </style>
  </head>
  <body>
    <article>
      <section class="bio">
        <h1>尹晶晶</h1>
        <img src="./images/zjz.jpg" alt="" width="100" height="100" />
        <p>女 | 26岁 | 前端开发工程师 | 杭州</p>
        <p>
          手机:<a href="tel:15297927693">15297927693</a> | 微信:15297927693 |
          邮箱:<a href="mailto:fangyinghang@foxmail.com">15297927693@163.com</a>
        </p>
      </section>
      <section class="education">
        <h2>教育经历</h2>
        <p>2014-2017 | 专科 | 九江学院 | 计算机科学与技术</p>
      </section>

      <section class="projects">
        <h2>项目经历</h2>
        <ol>
          <li>
            <header>
              <h3>大屏可视化</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/large-screen2">源码链接</a>
                <a href="https://yinjtcflm.gitee.io/large-screen-website"
                  >项目预览</a
                >
              </span>
            </header>
            <p>
              一款基于 <strong>React</strong> / <strong>React-Router</strong> /
              <strong>Echarts</strong> 的城市公安合成作战平台。
            </p>
            <p>让我对<strong>动态REM</strong>的使用有了更多了解。</p>
            <p>更加熟悉flex布局，熟练使用Echarts。</p>
          </li>
          <li>
            <header>
              <h3>红薯UI</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/sweet-potatoUI"
                  >源码链接</a
                >
                <a href="https://yinjtcflm.gitee.io/hs-ui-website">项目预览</a>
              </span>
            </header>
            <p>
              一个完全基于<strong>Vue 3</strong
              >和<strong>TypeScript</strong>搭建的UI库。涵盖了Button、Switch等常见组件。
            </p>
            <p>
              深入研究Vue3，使用了onMounted、watchEffect、ref、computed等API。
            </p>
            <p>模块化的代码简洁明了，易于阅读。</p>
          </li>
          <li>
            <header>
              <h3>水果记账</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/fruit-account">源码链接</a>
                <a
                  href="	https://fruit-account-1317770777.cos-website.ap-shanghai.myqcloud.com"
                  >项目预览</a
                >
              </span>
            </header>
            <p>
              一个基于
              <strong>Vue 3</strong
              >、<strong>TSX</strong>、<strong>Vite</strong>和<strong>Pinia</strong>的移动端多页面记账项目。
            </p>
            <p>
              使用<strong>Vant UI</strong>
              ，并对多组件进行封装，充分利用路由守卫和路由鉴权的知识。
            </p>
            <p>对于插槽和<strong>v-model</strong>的使用也更加了解。</p>
            <p>使用Vue 3中的Composition API，实现了组件化开发和类型安全。</p>
            <p>采用数据可视化、统计分析的功能使数据更加直观。</p>
          </li>
          <li>
            <header>
              <h3>简一记账Vue版</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/account">源码链接</a>
                <a href="https://yinjtcflm.gitee.io/account-website-h"
                  >项目预览</a
                >
              </span>
            </header>
            <p>
              一个基于
              <strong>Vue2</strong>、<strong>Vue-Router</strong>和<strong
                >Vuex</strong
              >
              的移动端多页面记账项目。
            </p>
            <p>这是从大众的需求出发，设计出的极简记账应用，特点是快速记账。</p>
            <p>可以通过图表查看自己的消费习惯，记账数据更加明了。</p>
          </li>
          <li>
            <header>
              <h3>简一记账React版</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/money-r-yuanma"
                  >源码链接</a
                >
                <a href="https://yinjtcflm.gitee.io/money-r">项目预览</a>
              </span>
            </header>
            <p>
              一个基于
              <strong>React</strong
              >、<strong>Hooks</strong>、<strong>React-Router</strong>和<strong
                >LocalStorage</strong
              >
              的简易记账项目。
            </p>
            <p>基于Vue版本实现，于是也做了React版本。</p>
          </li>
        </ol>
      </section>

      <section class="skills">
        <h2>技能</h2>
        <div class="wrapper">
          <ul>
            <li>熟悉页面制作技巧，能将设计稿<strong>还原</strong></li>
            <li>
              熟悉<strong>前后端分离</strong>技术，包括
              AJAX、跨域、前端路由、Cookie、Session 等
            </li>
            <li>
              熟练掌握 <strong>Vue全家桶</strong>的使用，包括
              VueCli、VueRouter、Vuex 等
            </li>
            <li>
              熟悉 <strong>React全家桶</strong>的使用，包括
              create-react-app、ReactRouter、Redux等，能快速上手
            </li>
            <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
            <li>熟悉常见的浏览器支持和浏览器兼容性问题</li>
            <li>
              了解 <strong>TypeScript</strong>的使用，我的项目就是 TS 实现的
            </li>
            <li>了解 <strong>Webpack 的配置和优化</strong></li>
          </ul>
        </div>
      </section>

      <section class="openSource">
        <h2>开源项目</h2>
        <ul>
          <li>
            <header>
              <h3>简易导航网站</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/qianhang">源码链接</a>
                <a href="https://yinjtcflm.gitee.io/qianhang/dist/index.html"
                  >预览链接</a
                >
              </span>
            </header>
            <p>一个简单的搜索查询网站</p>
          </li>
          <li>
            <header>
              <h3>简易画板</h3>
              <span>
                <a href="https://gitee.com/Yinjtcflm/canvas1">源码链接</a>
                <a href="https://yinjtcflm.gitee.io/canvas1/">项目预览</a>
              </span>
            </header>
            <p>我在学习 <strong>Canvas</strong> 时做的一个小作品</p>
          </li>
        </ul>
      </section>

      <section class="jobs">
        <h2>工作经历</h2>
        <ol>
          <li>
            <header>
              <h3>杭州易才人力资源管理有限公司</h3>
              <h4></h4>
              <span><time>2021年10月</time>~<time>2022年4月</time></span>
            </header>
            <ul>
              <li>
                负责和各公司人事对接，挖掘客户需求，拓展市场，达成业绩目标
              </li>
              <li>分析市场情况，了解竞争对手，拜访客户，制定并执行销售计划</li>
              <li>接待客户并进行销售演示，协调各职能部门完成服务合同</li>
            </ul>
          </li>
          <li>
            <header>
              <h3>杭州万乘联合投资有限公司</h3>
              <span><time>2019年1月</time>~<time>2021年10月</time></span>
            </header>
            <ul>
              <li>
                负责电脑上对接客户，解决客户疑问，常年业绩稳定排名在前十。
              </li>
              <li>
                与客户沟通能力强，发挥了团队合作精神，与同事积极协作，提高了效率和质量
              </li>
              <li>
                处理涉及风险评估、法律纠纷等特殊情况的事件，积累了相应的业务经验和风险管控能力。
              </li>
            </ul>
          </li>
        </ol>
      </section>

      <section class="others">
        <h2>自我评价</h2>
        <ul>
          <li>
            具有良好的学习能力和自主思考的能力，能够快速理解新技术和新知识。
          </li>
          <li>
            具有良好的团队合作意识和沟通能力，上进心强，能够承受一定的工作压力。
          </li>
          <li>
            能够独立完成前端开发工作，能够熟练运用前端技术和优化方案来提高页面响应速度和用户体验。
          </li>
          <li>
            对代码可读性和代码规范性有高度要求，能够写出高度复用和可维护的代码。
          </li>
          <li>
            <a href="https://github.com/Yinjtcflm">我的 GitHub</a
            >，过去三个月有多次提交,多次整合。
          </li>
        </ul>
      </section>
    </article>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
